<template>
	<view class="content">
		<loadingPage v-show="loadingPage"></loadingPage>
		<page-meta :page-style="'overflow:'+(gameShow?'hidden':'visible')"></page-meta>
		<view class="form" v-show="!loadingPage">
			<view class="form-item">
				<view class="label">项目分类</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="gameShow = true">
					<view class="value" v-if="!formData.name">请选择项目分类</view>
					<view class="pitchValue" v-else>{{formData.name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">性别要求</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="sexShow = true">
					<view class="value" v-if="!formData.sex">请选择性别要求</view>
					<view class="pitchValue" v-else>{{formData.sex}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">单价区间</view>
				<view class="section  tn-flex tn-flex-col-center tn-flex-row-between">
					<input type="text" v-model="formData.minPrice" />
					<view class="xian"></view>
					<input type="text" v-model="formData.maxPrice" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">期望段位</view>
				<view class="select border-bm tn-flex tn-flex-col-center">
					<input type="text" placeholder="请填写期望段位（选填）" placeholder-class="value"
						v-model="formData.danGrading" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">我的段位</view>
				<view class="select border-bm tn-flex tn-flex-col-center">
					<input type="text" placeholder="请填写玩家当前段位（选填）" placeholder-class="value"
						v-model="formData.myDanGrading" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">期望大区</view>
				<view class="select border-bm tn-flex tn-flex-col-center">
					<input type="text" placeholder="请填写期望大区（选填）" placeholder-class="value" v-model="formData.region" />
				</view>
			</view>
			<view class="form-item border-bm padd-bm tn-flex tn-flex-col-center tn-flex-row-between">
				<view class="label">期望局数</view>
				<view class="counter  tn-flex tn-flex-col-center">
					<image src="/static/index/subtractIcon.png" mode=""></image>
					<text class="num">{{formData.num}}</text>
					<image src="/static/index/addIcon.png" mode=""></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">期望时间</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="timeShow = true">
					<view class="value" v-if="!formData.time">请选择期望时间</view>
					<view class="pitchValue" v-else>{{formData.time}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">其他要求</view>
				<view class="textarea">
					<textarea placeholder="如：双排/三排/五排/匹配，来个国服等" placeholder-class="value"
						v-model="formData.askFor"></textarea>
				</view>
			</view>
			<view class="btn" @click="submit">发布联系达人</view>
		</view>
		<!-- 游戏分类 -->
		<tn-popup v-model="gameShow" mode="bottom">
			<picker-w @confirm="typeConfirm" :list="gameList"></picker-w>
		</tn-popup>
		<!-- 性别 -->
		<tn-popup v-model="sexShow" mode="bottom">
			<picker-w @confirm="sexConfirm" :list="sexList"></picker-w>
		</tn-popup>
		<!-- 时间 -->
		<tn-picker mode="time" :params="params" v-model="timeShow" @confirm="timeConfirm"></tn-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameShow: false,
				sexShow: false,
				timeShow: false,
				formData: {
					name: '',
					sex: '',
					time: '',
					minPrice: 0,
					maxPrice: 50,
					danGrading: '',
					myDanGrading: '',
					region: '',
					num: 1,
					askFor: ''
				},
				gameList: ['原神', '光遇', 'LOL手游', 'LOL手游', 'LOL手游', 'LOL手游'],
				sexList: ['男', '女'],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				loadingPage: true,
				rules:{
					name: '请选择项目分类',
					sex: '请选择性别要求',
					time: '请选择期望时间'
				}

			}
		},
		onReady() {
			setTimeout(() => {
				this.loadingPage = false
			}, 1000)

		},
		methods: {
			submit() {
				uni.navigateTo({
					url:"issue_user"
				})
				for(let i in this.formData){
					if(this.formData[i] == '') return this.msg(this.rules[i])
				}

			},
			// 游戏分类
			typeConfirm(e) {
				this.formData.name = e
				this.gameShow = false
			},
			// 性别
			sexConfirm(e) {
				this.formData.sex = e
				this.sexShow = false
			},
			// 时间
			timeConfirm(e) {
				let {
					year,
					month,
					day,
					hour,
					minute
				} = e
				this.formData.time = `${year}-${month}-${day}-${hour}-${minute}`
			},
			moveHandle() {
				return false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.3);
		}

		.border-bm {
			border-bottom: 1px solid #1E1F2E;
		}

		.padd-bm {
			padding-bottom: 44rpx;
		}

		.value {
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}

		.pitchValue {
			color: #FFFFFF;
		}

		.form {
			.form-item {
				margin-bottom: 40rpx;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #CCCCCC;
				}

				// 选择
				.select {
					height: 75rpx;

					.img1 {
						width: 32rpx;
						height: 18rpx;
					}

					input {
						flex: 1;
						color: #FFFFFF;
					}
				}

				// 区间
				.section {
					margin-top: 28rpx;

					input {
						width: 305rpx;
						height: 93rpx;
						background: #211C3A;
						border-radius: 20rpx;
						color: #FFFFFF;
						padding: 0 10rpx;
					}

					.xian {
						width: 32rpx;
						height: 1px;
						background-color: #CCCCCC;
					}
				}

				.counter {
					image {
						width: 48rpx;
						height: 48rpx;
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin: 0 16rpx;
					}
				}

				.textarea {
					background-color: #211C3A;
					border-radius: 20rpx;
					padding: 24rpx;
					margin-top: 28rpx;

					textarea {
						color: #FFFFFF;
					}
				}

			}

			.btn {
				height: 88rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;

			}
		}

		.gamePop {}

	}
</style>
